<template>
    <view class="index home-bg">
        <!-- #ifdef H5 -->
        <download-nav v-if="isShowDownload"></download-nav>
        <!-- #endif -->
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
            <u-navbar
				title="卡包"
                :border-bottom="false"
                :is-fixed="false"
                :background="navBackground"
				:title-color="'#fff'"
                :is-back="false"
            >	
            </u-navbar>
        </u-sticky>
		
		<view class="header-box">
			<!-- <view class="date-box">到期时间：2025年4月5日</view> -->
			<view class="card-box row-between">
				<view class="left">
					<view class="name">餐饮卡包</view>
					<view class="num1">玉竹子数：<text>{{cardObj.silver_bamboo || 0}}</text>根</view>
					<view class="num2">本月补贴额度：¥{{cardObj.subsidy_money || 0}}元（已使用¥{{cardObj.use_subsidy_money  || 0}}）</view>
				</view>
				<view class="level-box">
					<image :src="`${imgPrefix}/images/xcxweb/card/level.png`" class="level-img" />
					<view class="level-txt">Lv:{{cardObj.card_lv  || 0}}</view>
				</view>
			</view>
			
			<!-- 邀请 -->
			<button :open-type="inviteOpenType" class="column column-center" hover-class="none"  @tap="handleInvite">
				<view class="invite-box">
					<image :src="`${imgPrefix}/images/xcxweb/card/invite.png`" class="invite-img" />
					<view class="invite-txt-box">
						<view class="txt1">每邀请<text>1</text>人购买卡包，赠送<text>{{copywritingObj.second_give_bamboo || 0}}</text>根玉竹</view>
						<view class="txt2">升级补贴额度增加<text>{{copywritingObj.discount_amount || 0}}</text>元</view>
					</view>
				</view>
			</button>
			
			<view class="rights-tit">当前可享3项权益</view>
			<view class="rights-box row">
				<view class="rights-item flex1 column">
					<image :src="`${imgPrefix}/images/xcxweb/card/rights1.png`" class="rights-img" />
					每月补贴
				</view>
				<view class="rights-item flex1 column">
					<image :src="`${imgPrefix}/images/xcxweb/card/rights2.png`" class="rights-img" />
					邀请送玉竹
				</view>
				<view class="rights-item flex1 column">
					<image :src="`${imgPrefix}/images/xcxweb/card/rights3.png`" class="rights-img" />
					消费返金竹
				</view>
				<view class="rights-item flex1 column" @tap="exchangeBamboo()">
					<image :src="`${imgPrefix}/images/xcxweb/card/rights4.png`" class="rights-img" />
					金竹兑现
					<!-- is_distribution 是否大熊猫，1是，0否 -->
					<view class="rights-label" v-if="userInfo.is_distribution == 0">升级大熊猫</view>
				</view>
			</view>
		</view>
		
        <view class="contain">
            <view class="main">
				<!-- 商品 -->
				<view class="show-goods-box">
					<tabs  :config="tabsConfig"  :active="tabActive" @change="onTabChange">
						<tab v-for="(item, index) in tabList" :key="item.type" :title="item.name">
							<view class="show-goods-list row wrap">
								<view class="show-goods-item" v-for="(goodsItem, goodsIndex) in goodsList" :key="goodsIndex" @tap="toDetails(goodsItem.id)">
									<view class="imgs-box">
										<image :src="goodsItem.image" />	
									</view>
									<view class="content-box">
										<view class="title">{{goodsItem.name}}</view>
										<view class="intro">{{goodsItem.remark}}</view>
										<view class="num-box row-between">
											<view class="row">
												<view class="bamboo-box" v-if="tabActive == 0">{{goodsItem.min_jade_bamboo_sum}}根玉竹</view>	
												<view class="bamboo-box" v-if="tabActive == 1">{{goodsItem.price}}</view>
												<view class="price-box">¥{{goodsItem.market_price}}</view>
											</view>
											<view class="sale-box">已售:{{goodsItem.sales_sum}}</view>
										</view>
									</view>
								</view>
							</view>
							<loading-footer :status="goodsStatus" slotEmpty>
									<view class="data-null column-center" slot="empty">
									    <image class="img-null" :src="`${imgPrefix}/images/xcxweb/goods_null.png`"></image>
									    <view class="muted nr">暂无商品～</view>
									</view>
							</loading-footer>
						</tab>
					</tabs>
				</view>
            </view>
        </view>

       
        <!-- #ifdef APP-PLUS -->
        <lyg-popup
            v-if="appConfig.app_agreement"
            title="用户使用及隐私保护政策提示"
            protocolPath="/bundle/pages/server_explan/server_explan?type=0"
            policyPath="/bundle/pages/server_explan/server_explan?type=1"
            policyStorageKey="has_read_privacy"
        >
        </lyg-popup>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <!-- 用户隐私协议弹框 -->
        <privacy-popup v-model="showPrivacyPopup"></privacy-popup>
        <!-- #endif -->

        <!-- 无网络提示 -->
        <u-no-network z-index="1200" @retry="handleRetry"></u-no-network>

        <u-back-top
            :scroll-top="scrollTop"
            :top="1000"
            :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
        ></u-back-top>
    </view>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { getHome, getMenu, getBestList, getBambooRank, getSeckillTime, getSeckillGoods, getGoodsList, getCityByLocation, getCityArea, getMyCard, getCopywriting, getCopywritingLogin } from '@/api/store'
import { loadingType } from '@/utils/type'
import { loadingFun, menuJump, arraySlice, setTabbar, getRect, trottle } from '@/utils/tools'
import { toLogin } from '@/utils/login'
import Cache from '@/utils/cache'
import { getConfig, userShare, getRegisterCoupon } from '@/api/app'
import { baseURL } from "@/config/app"
import { PROVINCE_CODE, CITY_CODE, REGION_CODE, CURRENT_LOCATION, DEFAULT_CITY } from "@/config/cachekey"


const app = getApp()
export default {
    data() {
        return {
            scrollTop: 0,
            navSwiperH: 374,
            logo: '',
            navHeight: 0,
            currentSwiper: 0,
            page: 1,
            status: loadingType.LOADING,
			bambooRankPage: 1,
			bambooRankStatus: loadingType.LOADING,
            remainTime: '',
            navBg: 0,
            navList: [],
            news: [],
            seckill: {},
            seckillGoods: [],
            hotGoods: [],
            newGoods: [],
            activityArea: [],
            couponPopList: [],
            coupon: [],
            isDischarge: true,
            enable: true,
            isShowDownload: false,
            showPrivacyPopup: false, //微信用户隐私协议
			tabActive: 0,
			tabList: [
				{
					name: '玉竹兑换',
					type: 1,
				},
				{
					name: '百亿补贴',
					type: 2,
				}
			],
			bambooRankList: [], // 玉竹排行榜
			seckilId: "",
			seckillTime: [], // 秒杀时间段
			seckillPage: 1, 
			seckillStatus: loadingType.LOADING,
			goodsList: [],
			keyword: "",
			goodsPage: 1,
			goodsStatus:  loadingType.LOADING,
			priceSort: "desc", // 销量排序:desc-降序；asc-升序
			saleSort: "desc",	// 价格排序:desc-降序；asc-升序
			// 当前位置信息
			currentLocation: {
				longitude: '',
				latitude: ''
			},
			// 城市信息
			cityData: {},
			// 区域信息
			areaData: {},
			tabsConfig: {
				// 字体大小 rpx
				fontSize: 28,
				// 字体颜色
				color: '#333',
				// 激活字体颜色
				activeColor: '#366667',
				borderRadius: '16rpx 16rpx 0 0',
				// 下划线宽度 rpx  注意：设置了此值 underLinePadding 失效
				underLineWidth: 46,
				// 下划线高度 rpx
				underLineHeight: 10,
				// 下划线颜色
				underLineColor: 'rgba(54,102,103,0.68)',
				bgColor: 'transparent',
			},
			cardObj: {},
			imgPrefix: baseURL,
			inviteOpenType: '',
			is_buy_card_case: '', // 是否购买卡包，0 否 1是
			copywritingObj: {}
        }
    },
    async onLoad(options) {
		console.log('options---', options)
        this.headerAction = wx.createAnimation({
            delay: 0,
            duration: 100,
            timingFunction: 'ease-in-out'
        })
        this.onPageScroll = trottle(this.onPageScroll, 500, this)
        // setTabbar()
        this.navHeight = app.globalData.navHeight
        this.isDischarge = false
        console.log(this.appConfig)
        // #ifdef H5
        if (options && options.isapp == 1) {
            this.isShowDownload = true
        }
        // #endif
    },
    async onShow() {
		this.getCopywritingFun()
		
		console.log('this.inviteOpenType', this.inviteOpenType)
		 this.getUser().then((data) => {
			 console.log('getUser-data:', data)
			 if(data){
				 this.is_buy_card_case = data.is_buy_card_case;
				 console.log('是否购买卡包:', this.is_buy_card_case)
				 if(data.is_buy_card_case == 1){ // 购买了卡包才可以分享
					 this.inviteOpenType = 'share'
					 console.log('this.inviteOpenType', this.inviteOpenType)
				 }
			 }
		 })
		
        // this.$nextTick(function () {
        //     getRect('.index').then((res) => {
        //         if (res.top == 0) {
        //             this.navBg = 0
        //         }
        //     })
        // })

        // #ifdef H5
        this.enable = true
        // #endif
		
		// this.getUser()
		if(this.isLogin){
			this.getMyCardFun()
		}

		// console.log('this.currentLocation', this.currentLocation)
		// let { longitude, latitude } = this.currentLocation
		// if(longitude && latitude){ // 当前位置存在直接初始化活动列表
		// 	this.initGoodsList()
		// }else{ // 当前位置不存在重新获取位置后再请求活动列表
		// 	this.getCurrentCity()
		// }
		
		this.initGoodsList()
		
    },
    onHide() {
        // #ifdef H5
        this.enable = false
        // #endif
    },
    onReachBottom() {
	  this.getGoodsListFun()
    },
    onPullDownRefresh() {
      this.initGoodsList()
    },
    onShareAppMessage() {
        console.log(this.inviteCode)
        const shareInfo = Cache.get('shareInfo')
        console.log('是否购买卡包:', this.is_buy_card_case)
        let path = 'pages/card/card'
        if(this.is_buy_card_case == 1){ // 购买了卡包
        	path = 'pages/card/card?invite_code=' + this.inviteCode
        }
        return {
            title: shareInfo.mnp_share_title,
        	path: path,
            imageUrl: shareInfo.mnp_share_image
        }
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        if (!this.enable) return
        let percent = scrollTop / top
        this.navBg = percent > 1 ? 1 : percent
        this.scrollTop = scrollTop
    },
    destroyed() {
        this.isDischarge = true
    },
    methods: {
        ...mapMutations(['SETCONFIG']),
        ...mapActions(['getUser']),
        // 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
        async handleRetry() {
            console.log('网络重试刷')
            try {
                const { code, data } = await getConfig()
                if (code == 1) {
                    this.SETCONFIG(data)
                    // setTabbar()
                }
            } catch (e) {
                // uni.showTabBar()
            }
            this.getShareInfo()
            this.getUser()
        },
		getCopywritingFun(){
			if(!this.isLogin){ // 已登录
				getCopywriting().then((res) => {
					this.copywritingObj = res.data;
					console.log('this.copywritingObj', this.copywritingObj)
				})
			}else{ // 未登录
				getCopywritingLogin().then((res) => {
					this.copywritingObj = res.data;
					console.log('this.copywritingObj', this.copywritingObj)
				})
			}	
		},
		handleInvite(){
			console.log('是否购买卡包:', this.is_buy_card_case)
			console.log('this.inviteOpenType', this.inviteOpenType)
			
			if(!this.is_buy_card_case){ // 未购买卡包
				this.$toast({
					title: '请先前往购买卡包'
				})
			}else{
				// this.showShareBtn = true
			}
		},
		toDetails(id){
			uni.navigateTo({
				url: `/pages/goods_details/goods_details?id=${id}`
			})
		},
		// 授权位置信息
		getCurrentCity(fn) {
			uni.getSetting({
				success: res => {
					if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation")) {
						if (res.authSetting["scope.userLocation"]) {
							this.getLocation(fn)
						} else {
							uni.hideLoading()
							uni.showModal({
								title: '提示',
								content: '请重新授权获取您的地理位置，否则部分功能将无法使用',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: () => this.getLocation(fn)
										})
									} else {
										uni.showToast({
											title: '请授权获取您的地理位置，否则部分功能将无法使用',
											icon: 'none',
											duration: 2000
										})
									}
								},
								fail: (res) => {
									uni.showToast({
										title: '位置获取失败',
										icon: "none",
										duration: 2000
									})
								}
							})
						}
					} else {
						this.getLocation(fn)
					}
				}
			})
		},
		// 获取当前位置坐标
		getLocation (fn) {
		      let that = this
		      // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
		      uni.getSetting({
		        success (res) {
		          console.log(res)
		
		          // 如果没有授权
		          if (!res.authSetting['scope.userLocation']) {
		            // 则拉起授权窗口
		            uni.authorize({
		              scope: 'scope.userLocation',
		              success () {
		                //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
		                uni.getLocation({
		                  type: 'wgs84',
						  geocode: true,//设置该参数为true可直接获取经纬度及城市信息
		                  success: function (res) {
							console.log('允许授权res', res)
		                    that.x = res.longitude
		                    that.y = res.latitude
		                    console.log(res)
		                    console.log('当前位置的经度：' + res.longitude)
		                    console.log('当前位置的纬度：' + res.latitude)
							that.currentLocation = res
							that.getCurCity()
							
		                    // uni.showToast({
		                    //   title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
		                    //   icon: 'success',
		                    //   mask: true
		                    // })
		                  }, fail (error) {
		                    console.log('失败', error)
							uni.showToast({
								title: error.errMsg,
								icon: 'error',
								mask: true
							})
		                  }
		                })
		              },
		              fail (error) {
		                //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
		                console.log('拒绝授权', error)
		
		                uni.showModal({
		                  title: '提示',
		                  content: '若点击不授权，将无法使用位置功能',
		                  cancelText: '不授权',
		                  cancelColor: '#999',
		                  confirmText: '授权',
		                  confirmColor: '#f94218',
		                  success (res) {
		                    console.log(res)
		                    if (res.confirm) {
		                      // 选择弹框内授权
		                      uni.openSetting({
		                        success (res) {
		                          console.log(res.authSetting)
		                        }
		                      })
		                    } else if (res.cancel) {
		                      // 选择弹框内 不授权
		                      console.log('用户点击不授权')
		                    }
		                  }
		                })
		              }
		            })
		          } else {
		            // 有权限则直接获取
		            uni.getLocation({
		              type: 'wgs84',
					  geocode: true,//设置该参数为true可直接获取经纬度及城市信息
		              success: function (res) {
		                that.x = res.longitude
		                that.y = res.latitude
		                console.log(res)
		                console.log('当前位置的经度：' + res.longitude)
		                console.log('当前位置的纬度：' + res.latitude)
						console.log('允许授权res', res)
						that.currentLocation = res
						that.getCurCity()
		                // uni.showToast({
		                //   title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
		                //   icon: 'success',
		                //   mask: true
		                // })
		              }, fail (error) {
		                uni.showToast({
		                  title: '请勿频繁调用！',
		                  icon: 'none',
		                })
		                console.log('失败', error)
		              }
		            })
		          }
		        }
		      })
		},
		async getCurCity(){
			console.log('this.currentLocation', this.currentLocation)
			let { longitude, latitude } = this.currentLocation
			let params = {
				lng: longitude,
				lat: latitude
			}
			let res = await getCityByLocation(params)
			console.log('getCurCity--res', res)
			this.cityData = res.data;
			console.log('this.cityData', this.cityData)
			this.getCityAreaFn()
		},
		async getCityAreaFn(){
			console.log('this.cityData', this.cityData)
			let { city_code } = this.cityData
			let params = {
				city_code: city_code
			}
			let res = await getCityArea(params)
			console.log('getCurCity--res', res)
			this.areaData = res.data;
			console.log('this.areaData', this.areaData)
			this.initGoodsList()
		},
		async getMyCardFun(){
			let res = await getMyCard()
			console.log('getMyCard--res', res)
			this.cardObj = res.data;
			console.log('this.cardObj', this.cardObj)
		},
		handleMenu(item, index){
			if(item.id == 1){ // 玉竹兑换
			   if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url: `/bundle/pages/bamboo_exchange/bamboo_exchange`
				})
			}
		},
		onTabChange(active){
			console.log('active', active)
			this.tabActive = active;
			this.initGoodsList()
		},
		initGoodsList(){
			this.goodsStatus = loadingType.LOADING
			this.goodsPage = 1
			this.goodsList = []
			this.getGoodsListFun()
		},
        async getShareInfo() {
            const { code, data } = await userShare()
            if (code == 1) {
                Cache.set('shareInfo', data)
            }
        },
		async getGoodsListFun() {
			let {
				goodsPage,
				goodsList,
				keyword,
				priceSort,
				saleSort,
				goodsStatus,
				navType
			} = this;
			if (goodsStatus == loadingType.FINISHED) return;
			// let { longitude:user_lng, latitude:user_lat } = this.currentLocation
			// let {city_code: city_coding} = this.cityData
			// let {id: area_code} = this.areaData
			
			let { longitude, latitude } = Cache.get(CURRENT_LOCATION) // 当前位置
			let defaultCity = Cache.get(DEFAULT_CITY); // 默认城市，成都
			console.log('defaultCity', defaultCity)
			
			const params = {
				// category_id: this.type == 1 ? this.id : '',
				// brand_id: this.type == 0 ? this.id : '',
				keyword,
				sales_sum: saleSort,
				price: priceSort,
				page_no: goodsPage,
				type: navType, // type: 商品类型默认2; 1:玉竹兑换商品 2：普通商品（默认）
				user_lat: latitude || defaultCity.lat, // 没有获取到经纬度就取默认的经纬度
				user_lng: longitude || defaultCity.lon, // 没有获取到经纬度就取默认的经纬度
				city_coding: Cache.get(CITY_CODE) || ''
				// area_code: uni.getStorageSync(REGION_CODE)
				// city_coding: city_coding,
				// area_code: area_code,
			}
			console.log('卡包列表参数：', params)
			const data = await loadingFun(getGoodsList, goodsPage, goodsList, goodsStatus, params)
			if (!data) return
			this.goodsPage = data.page
			this.goodsList = data.dataList
			console.log('this.goodsList', this.goodsList)
			this.goodsStatus = data.status
		},
        async tapMenu(item) {
            if (!this.isLogin) return toLogin()
            menuJump(item)
        },
        goPage(url) {
            if (!this.isLogin) return toLogin()
            uni.navigateTo({
                url
            })
        },
		exchangeBamboo(url){
			if (!this.isLogin) return toLogin()
			 // is_distribution 是否大熊猫，1是，0否
			 console.log('this.userInfo', this.userInfo)
			if(this.userInfo.is_distribution == 0){
				console.log('this.userInfo.is_distribution', this.userInfo.is_distribution)
				this.$toast({
					title: `升级大熊猫后才可兑现`
				})
				return;
			}else{
				uni.navigateTo({
				    url: `/bundle/pages/bamboo_exchange_record/bamboo_exchange_record`
				})
			}
		}
    },
    computed: {
        ...mapGetters(['userInfo', 'inviteCode', 'appConfig']),
		navBackground(){
			let resultBg = {}
			if(this.navBg > 0.5){
				resultBg = {
					backgroundImage:  `linear-gradient(90deg,  #569496 0%, #366667 100%)`
				}
			}
			return resultBg;
		},
        showLogo() {
            return this.seting.logo
        },
        seting() {
            const { index_setting } = this.appConfig
            return index_setting
        },
		navType() {
			let result = ''
			if(this.tabList.length > 0){
				result =  this.tabList[this.tabActive].type
			}
			return result
		}
    }
}
</script>

<style lang="scss" scoped>
.header-box{
	padding-bottom: 20rpx;
	.date-box{
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		margin-bottom: 16rpx;
	}
	.card-box{
		background: url(#{$img_prefix}/images/xcxweb/card/card_bg.png) no-repeat;
		background-size: 734rpx 267rpx;
		width: 734rpx;
		height: 267rpx;
		box-sizing: border-box;
		padding: 0 32rpx 30rpx 36rpx;
		margin: 0 auto;
		.left{
			.name{
				font-weight: 700;
				font-size: 44rpx;
				line-height: 64rpx;
				text-transform: none;
				background: linear-gradient(182.1820718044026deg, #FFD279 13%, #FFFACE 74%);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.num1{
				margin: 14rpx 0 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #64DAB5;
				text{
					font-size: 56rpx;
					font-weight: bold;
					color: #FFF;
				}
			}
			.num2{
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}
		}
		
		.level-box{
			position: relative;
			.level-img{
				width: 150rpx;
				height: 160rpx;
			}
			.level-txt{
				position: absolute;
				bottom: 12rpx;
				left: 26%;
				font-size: 38rpx;
				color: #E3FAFF;
				line-height: 44rpx;
				text-shadow: 0px 2px 4px rgba(40,44,255,0.85);
				text-stroke: 0px #FFFFFF;
			}
		}
		
	}
	// .invite-img{
	// 	width: 710rpx;
	// 	height: 120rpx;
	// 	margin: -8rpx auto 8rpx;
	// }
	.invite-box{
		margin: -8rpx auto 8rpx;
		position: relative;
		image{
			display: block;
			width: 710rpx;
			height: 120rpx;
		}
		.invite-txt-box{
			.txt1{
				width: 100%;
				position: absolute;
				left: 50%;
				top: 9rpx;
				font-size: 28rpx;
				color: #FFF;
				font-weight: bold;
				letter-spacing: 4rpx;
				transform: translateX(-50%) skewX(-4deg);
				text{
					color: #FFB63B;
					font-size: 30rpx;
					font-weight: 1000;
				}
			}
			.txt2{
				    width: 100%;
				    position: absolute;
				    left: 50%;
				    top: 44rpx;
				    font-size: 30rpx;
				    color: #FFF;
				    font-weight: bold;
				    letter-spacing: 6rpx;
					transform: translateX(-50%) skewX(-4deg);
				text{
					color: #FFB63B;
					font-size: 32rpx;
					font-weight: 1000;
				}
			}
		}
	}
	.rights-tit{
		margin: 10rpx 0 30rpx 0;
		padding: 0 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 46rpx;
	}
	.rights-box{
		text-align: center;
		.rights-item{
			position: relative;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			.rights-img{
				width: 84rpx;
				height: 84rpx;
				margin: 0 auto 16rpx;
			}
			.rights-label{
				position: absolute;
				top: -12rpx;
				right: 18rpx;
				width: 96rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				background: linear-gradient( 268deg, #FE670C 0%, #FFC745 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #FFFFFF;
				font-size: 18rpx;
				color: #FFFFFF;
				box-sizing: border-box;
			}
		}
	}
}


.home-bg {
    background: url(#{$img_prefix}/images/xcxweb/card/card_hd_bg.png) no-repeat;
    background-size: 100% auto;
}
.index {
    .live-play {
        position: fixed;
        z-index: 999;
        bottom: 200rpx;
        right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 80rpx;
        border: $-solid-border;
        border-radius: 50%;
        font-size: 32rpx;
        background-color: #ffffff;

        &__icon {
            animation: scale 0.5s infinite;
        }

        @keyframes scale {
            from {
                top: 0px;
                transform: scale(1);
            }
            to {
                transform: scale(1.2);
            }
        }
    }

    background-size: 100% auto;

    .logo-wrap {
        position: absolute;

        .logo {
            width: auto;
            height: 52rpx;
        }
    }

    .header {
        .navigation-bar {
            padding-top: var(--status-bar-height);
            box-sizing: border-box;
        }
    }

    .contain {
        .main {
            position: relative;
            z-index: 9;
            // padding: 0 20rpx;

            .nav {
                position: relative;
                border-radius: 14rpx;

                .nav-item {
                    width: 20%;
                    margin-top: 30rpx;

                    .nav-icon {
                        width: 82rpx;
                        height: 82rpx;
                        margin-bottom: 15rpx;
                    }
                }

                .dots {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 20rpx;
                    display: flex;

                    .dot {
                        width: 10rpx;
                        height: 6rpx;
                        border-radius: 6rpx;
                        margin-right: 10rpx;
                        background-color: rgba(255, 44, 60, 0.4);

                        &.active {
                            width: 20rpx;
                            background-color: $-color-primary;
                        }
                    }
                }
            }
			
		
			.show-goods-box{
				padding-bottom: 50rpx;
				background: #FAFAFA;
				.show-goods-list{
					gap: 18rpx;
					align-items: stretch;
					margin: 20rpx 20rpx 20rpx;
					.show-goods-item{
						width: 346rpx;
						border-radius: 16rpx;
						background: #FFF;
						.imgs-box{
							position: relative;
							width: 346rpx;
							height: 266rpx;
							background: #D8D8D8;
							border-radius: 16rpx 16rpx 0rpx 0rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 12rpx;
							}
						}
						.content-box{
							position: relative;
							padding: 16rpx 20rpx;
							background: #FFF;
							border-radius: 0 0 16rpx 16rpx;
							.title{
								margin: 14rpx 0 22rpx;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								line-height: 40rpx;
							}
							.intro{
								font-size: 24rpx;
								color: #999999;
								line-height: 36rpx;
							}
							.num-box{
								margin-top: 10rpx;
								.bamboo-box{
								    font-weight: 500;
									font-size: 28rpx;
									color: #366667;
									line-height: 40rpx;
									margin-right: 14rpx;
								}
								.price-box{
									font-size: 20rpx;
									color: #999999;
									line-height: 28rpx;
									text-decoration: line-through;
								}
								.sale-box{
									font-size: 20rpx;
									color: #999999;
									line-height: 28rpx;
								}
							}
							.exchange-box{
								position: absolute;
								right: 20rpx;
								bottom: 12rpx;
								width: 114rpx;
								height: 92rpx;
								text-align: center;
								background: url(#{$img_prefix}/images/xcxweb/index/exchange_bg.png) no-repeat;
								background-size: 100% 100%;
								color: #FFF;
								font-size: 24rpx;
								padding: 18rpx 0 0 0;
								line-height: 30rpx;
							}
							.gain-box{
								position: absolute;
								right: 20rpx;
								bottom: 12rpx;
								width: 136rpx;
								height: 54rpx;
								text-align: center;
								background: url(#{$img_prefix}/images/xcxweb/index/gain_bg.png) no-repeat;
								background-size: 100% 100%;
								color: #FFF;
								font-size: 24rpx;
								padding: 22rpx 0 0 16rpx;
								line-height: 28rpx;
							}
						}
					}
				}
			}

            .activity-header {
                height: 90rpx;
                padding: 0 20rpx;
            }

            .seckill {
                .dec {
                    background-color: #fffbdb;
                    width: 150rpx;
                }
            }

            .hot,
            .new-goods {
                .title-image {
                    width: 144rpx;
                    height: 55rpx;
                }
            }
        }

        .goods {
            .goods-title {
                height: 100rpx;

                .line {
                    width: 58rpx;
                    height: 1px;
                    background-color: #ccc;
                    margin: 0 22rpx;
                }

                .icon {
                    width: 38rpx;
                    height: 38rpx;
                }
            }
        }
    }
}
</style>
